<template>
  <div>
    <div class="c-br20 c-p c-bg-white c-pv24 c-ph24 c-mt24" v-for="(item,index) in list" :key="index">
      <div class="c-flex-row c-aligni-center c-pb16 c-bd-b1-f6" :class="item.status == -1 ? 'c-opacity60' : ''">
        <div class="c-ww48 c-hh48 c-brp50 c-p c-text-hidden c-mr10">
          <CoverImg :coverSizeClass="'c-w100 c-h c-text-hidden'" :coverUrl="$addXossFilter((item.isHidden == -1 && fromType != 2 ? '' : item.questionAvatar), require('@/assets/no_login_head.png'))" />
        </div>
        <div class="c-fs24 c-fc-xblack">
          <span>{{item.isHidden == -1 ? '匿名者' : fromType == 2 ? '我' : (item.questionName) | nickNameLimitLength(7)}}</span>
          <span class="c-ph4 c-fc-gray">向</span>
          <span>{{fromType == 1 ? '我' : (item.answerName) | nickNameLimitLength(7)}}</span>
          <span class="c-pl4 c-fc-gray">{{questionCustom == 1 ? '预约' : '提问：'}}</span>
        </div>
      </div>
      <div class="c-pa c-p-t0 c-fc-gray c-pz1 c-p-r20">
        <img v-if="item.questionStatus == -1" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/qa/delete.png" alt="" class="c-ww90">
        <img v-if="item.questionStatus != -1 && item.status == -1" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/qa/overTime.png" alt="" class="c-ww90">
      </div>
      <div class="c-mt24 c-fs24" @click="clickGoDetail(item.questionDetailId, item.questionStatus)">
        <qaContentItem :item="item" :playAduioSrc="playAduioSrc" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"></qaContentItem>
        <div class="c-flex-row c-flex-center c-fc-sblack c-pt10" v-if="item.questionStatus==2"><span class="c-fc-sgray c-pr16"> ------ </span><span class="iconfont">&#xe7f6;</span> 答主已删除回复 <span class="c-fc-sgray c-pl16"> ------ </span></div>
        <div class="c-fs20 c-fc-gray c-mt20">{{item.questionTime}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-pt16 c-fs22 c-fc-gray">
          <div class="c-flex-row c-aligni-center c-justify-sb c-w100" :class="item.status == -1 ? 'c-opacity60' : ''">
            <div class="">
              <span v-if="isDirect == 0" class="c-fs22  c-fc-xmlred">
                <span v-if="item.price > 0 && !$isWxAppIos()" class="c-fs22 c-fw600">{{'￥' | iosPriceFilter('Question')}}</span>
                <span :class="item.price == 0 ? 'c-fs28' : 'c-fs36'" class="c-fw600" v-html="$getPriceStyleHtml(Number(pirceNum(item)).toFixed(2), true, 15, 'c-fs28')"></span>
                <!-- <span :class="item.price == 0 ? 'c-fs28' : 'c-fs36'" class="c-fw600">{{item.price == 0 ? '免费' : !$isWxAppIos() ? item.price : ''}}</span> -->
                <span class="c-ph10 c-fc-gray" v-if="item.questionStatus != -1 && (!$isWxAppIos() || ($isWxAppIos() && item.price == 0))">/</span>
              </span>
              <span v-if="isDirect == 1" class="c-fs22 c-fc-xmlred">
                <span v-if="(item.isDirect != 1 && item.freeOnLook !=1 ) && !$isWxAppIos()" class="c-fs22 c-fw600">{{'￥' | iosPriceFilter('Question')}}</span>
                <span :class="(item.isDirect == 1 || item.freeOnLook ==1) ? 'c-fs28' : 'c-fs36'" class="c-fw600" v-html="$getPriceStyleHtml(Number(pirceNum(item)).toFixed(2), true, 15, 'c-fs28')"></span>
                <!-- <span :class="(item.isDirect == 1 || item.freeOnLook ==1) ? 'c-fs28' : 'c-fs36'" class="c-fw600">{{(item.isDirect == 1 || item.freeOnLook ==1) ? '免费' : !$isWxAppIos() ? item.price : ''}}</span> -->
                <span class="c-ph10 c-fc-gray" v-if="item.questionStatus != -1 && (!$isWxAppIos() || ($isWxAppIos() && (item.isDirect == 1 || item.freeOnLook ==1)))">/</span>
              </span>
              <span v-if="item.questionStatus != -1" class="c-ws-n c-fs22 c-fc-gray">{{item.questionStatus == 2 ? '0回复' : item.status == -1 ? '未回复' : ((item.questionStatus == 1 && item.solutionCount > 0 && fromType !=4) || (item.solutionCount > 0 && fromType ==4)) ? `${item.solutionCount} 回复` : '未回复'}}</span>
            </div>
            <div class="theme-bg c-fc-white c-fs22 c-br32 c-hh48 c-flex-row c-flex-center c-ww128" v-if="fromType == 4 && item.questionStatus != -1 && item.status == 2" @click="clickQuestionItem(index, item.questionStatus)">查看</div>
          </div>
          <div v-if="fromType == 2" class="c-ww100 c-hh44 c-flex-row c-flex-center  c-fc-gray" @click.stop="delQuestion(item.questionDetailId, index)"><i class="iconfont">&#xe6b3;</i><span class="c-fs22 c-ml4">删除</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import CoverImg from '@/components/templates/common/coverImg.vue';
import qaContentItem from "@/components/templates/qa/qaContentItem.vue";

let isClicking = false;
export default {
  name: "QaList",
  components: {
    CoverImg,
    qaContentItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fromType: {
      type: Number,
      default: 0, //1问我的 2我问的 3我围观 4有支付(查看)按钮
    },
    playAduioSrc: {
      type: String,
      default: '',
    },
    isDirect: {
      type: Number,
      default: 0, //0 是否免费按价格判断, 1 是否免费靠isDirect或freeOnLook判断
    },
    bindPhoneSetting: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
    }
  },
  methods: {
    pirceNum(item) {
      let price = 0.00
      if (item.isDirect == 1 || item.freeOnLook == 1) {
        price = 0.00
      } else if (item.price == 0) {
        price = 0.00
      } else if (!this.$isWxAppIos()) {
        price = item.price
      }
      return price
    },
    clickGoDetail(questionDetailId, questionStatus) {
      console.log('clickGoDetail')
      if (questionStatus == -1 || this.fromType == 4) {
        return;
      }
      this.$routerGo(this, "push", {
        path: '/homePage/qa/answerDetail',
        query: {
          questionDetailId: questionDetailId,
        }
      })
    },
    delQuestion(questionDetailId, index) {
      let $this = this;
      this.$cjConfirm({
        title: '提示',
        titleCenter: true,
        message: '删除后，将提问的内容和回复的内容都不可见,是否确定删除该提问内容',
        messageCenter: true,
        showMasker: true,
        clickCloseModal: false,
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        onConfirm() {
          utilJs.getMethod(global.apiurl + `question/deleteMyQuestionDetail/${questionDetailId}`, res => {
            $this.$showCjToast({
              text: '删除成功！',
              type: 'success'
            });
            $this.$nextTick(res => {
              $this.type = 1;
              $this.list.splice(index, 1);
            })
          });
        },
      })
    },
    //点击查看问题列表答案
    clickQuestionItem(index, questionStatus) {
      // 判断是否可以点击
      if (questionStatus == -1) {
        return;
      }
      if (this.$isWxAppIos() && ((this.list[index].isDirect == 0 && !(this.list[index].price == 0)) || !(this.list[index].isDirect == 1 || this.list[index].freeOnLook == 1))) { // 兼容小程序mp项目，不能删除
        this.$showCjToast({
          text: "ios暂不支持查看",
          type: "warn",
          time: 1000
        });
        return
      }
      if (this.list[index].isDirect == -1) {
        this.addToCircusee(this.list[index].questionDetailId);
      } else {
        if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
          if (utilJs.goBindMobile()) return;
        }
        this.$routerGo(this, "push", {
          path:
            "/homePage/qa/answerDetail?questionDetailId=" +
            this.list[index].questionDetailId
        });
      }
    },
    //添加围观记录
    addToCircusee(questionDetailId) {
      if (isClicking) {
        return;
      }
      isClicking = true;
      utilJs.getMethod(
        global.apiurl +
        "question/circuseeDetail?questionDetailId=" +
        questionDetailId,
        res => {
          isClicking = false;
          if (res.isFree == 1) {
            if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
              if (utilJs.goBindMobile()) return;
            }
            this.$routerGo(this, "push", {
              path:
                "/homePage/qa/answerDetail?questionDetailId=" + questionDetailId
            });
          } else {
            if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
              if (utilJs.goBindMobile()) return;
            }
            if (!utilJs.isOpenIosGzhPay('15')) {
              this.$store.commit('updateShowVitualModal', true);
              return;
            }
            this.$routerGo(this, "push", {
              path: "/homePage/course/coursePay",
              query: {
                extId: res.questionOrderId,
                ckFrom: global.ckFrom.circusee,
                cId: -1
              }
            });
          }
        },
        failRes => {
          isClicking = false;
        }
      );
    },
    clickPreviewImage(imgUrl, itemImgList, questionStatus) {
      this.$emit('clickPreviewImage', imgUrl, itemImgList, questionStatus);
    },
    clickPlayAudio(audioUrl, questionStatus) {
      this.$emit('clickPlayAudio', audioUrl, questionStatus);
    },
    clickShowVideo(isReply, questionStatus, videoMp4) {
      this.$emit('clickShowVideo', isReply, questionStatus, videoMp4);
    }
  },
  activated() {
  }
};
</script>

<style lang="scss" scoped>
.fc-blue {
  color: #436AB0;
}
.ww192 {
  width: 4.8rem;
}
.p-tm20 {
  top: -0.5rem
}
.lh44 {
  line-height: 1.1rem;
}
.p-r24 {
  right: -0.4rem;
}
.p-b16 {
  bottom: -0.4rem;
}
.fc-green {
  color: #30B656;
}
.mh8 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.p-t40 {
  top: 0.4rem;
}
.fs96 {
  font-size: 2.4rem;
}
</style>